<template>
    <el-dialog :model-value="props.editDialog" title="编辑商品" :before-close="() => emit('showEditDialog', false)">
      <el-form ref="ruleFormRef" :model="form" label-width="auto" :rules="formRules.rules">
         <el-form-item label="商品名称" prop="goods_name">
           <el-input v-model="form.goods_name" />
         </el-form-item>
  
         <el-form-item label="商品价格" prop="goods_price">
           <el-input v-model.number="form.goods_price" />
         </el-form-item>
  
         <el-form-item label="商品数量" prop="goods_number" >
           <el-input v-model.number="form.goods_number" />
         </el-form-item>
  
         <el-form-item label="商品重量" prop="goods_weight">
           <el-input v-model.number="form.goods_weight" />
         </el-form-item>
      </el-form>
  
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="emit('showEditDialog', false)">取消</el-button>
          <el-button type="primary" @click="onSubmit(ruleFormRef)">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref, watch } from 'vue'
  import type { FormInstance } from 'element-plus'
  import { ShowEditProductFnc, EditProductFnc } from '@/api/goods'
  
    const props = defineProps({
      editDialog: {type: Boolean, required: true},
      pageNow: {type: Number, required: true},
      pageSize: {type: Number, required: true},
      productID: {type: Number, required: true}
    })
  
    const emit = defineEmits(['showEditDialog', 'init'])
    const ruleFormRef = ref<FormInstance>()
    const objForm = ref({}) // 复制对象  用做修改对象时做比较 是否有做修改  
    const id = ref(0)
  
    // 表单数据
    const form = reactive({ goods_name: '', goods_price: 0, goods_number: 0, goods_weight: 0 })
  
    // 表单验证规则
    const formRules = reactive({
      rules: {
        goods_name: [
          {required: true, message: '请输入商品名', trigger: 'blur'},
          {min: 1, max: 10, message: '长度在1-10个字符', trigger: 'blur'}
        ],
        goods_price: [
          {required: true, message: '请输入价格', trigger: 'blur'},
          {type: 'number', message: '价格为数字', trigger: 'blur'}
        ],
        goods_number: [
          {required: true, message: '请输入数量', trigger: 'blur'},
          {type: 'number', message: '数量为数字', trigger: 'blur'}
        ],
        goods_weight: [
          {required: true, message: '请输入重量', trigger: 'blur'},
          {type: 'number', message: '重量为数字', trigger: 'blur'}
        ]
      }
    })

    watch(() => props.productID, async (newID) => {
      id.value = newID
      const res = await ShowEditProductFnc(newID)
      if(res.data.meta.status === 200) {
        form.goods_name = res.data.data.goods_name
        form.goods_price = res.data.data.goods_price
        form.goods_number = res.data.data.goods_number
        form.goods_weight = res.data.data.goods_weight
        objForm.value = {...form}
      }
    })

    // 提交表单
    const onSubmit = async (formEl: FormInstance | undefined) => {
      if(!formEl) return  
      await formEl.validate(async (valid) => {
        if(valid) {
          if(JSON.stringify(objForm.value) === JSON.stringify(form)) { // 未做修改
            emit('showEditDialog', false)
            return
          } else { // 修改了
            const res =  await EditProductFnc(id.value, form)
            console.log(res)
            if(res.data.meta.status === 200) {
              ElMessage({type: 'success', message: '更新成功', duration: 1000, onClose: () => {
                emit('showEditDialog', false)
                emit('init', props.pageNow, props.pageSize)
              }})
            } else {
              ElMessage({type: 'error', message: res.data.meta.msg, duration: 1000, onClose: () => emit('showEditDialog', false)})
            }
          }
        }
      })
    }
  </script>